import React from 'react';
import useStyles from '../useStyles.tsx';
import {Text, View} from 'react-native';
import {useThemeColors} from "../../hooks/hooks.tsx";
import {useSelector} from "react-redux";

interface OrderListItemProps {
    item?: any,
}

const Ordertem = (props: OrderListItemProps) => {
    const styles = useStyles();
    const colors = useThemeColors();
    const {item = {}} = props;
    const variants = useSelector((state: any) => state.variants);

    const getFullTitle = (option: any) => {
        let title: string = option.value ? option.value : option;
        if (variants[title]) {
            const variant = variants[title];
            if (variant.name) {
                title += `(${variant.name})`;
            }
        }

        return '--' + title;
    }

    const variantColorsMap = React.useMemo(() => {
        const colorMap: any = {};
        item.product?.variation_list?.forEach((variation: any) => {
            variation.options.forEach((option: any) => {
                colorMap[option.title] = option.color;
            });
        });
        return colorMap;
    }, [item.product?.variation_list]);

    const getVariantColor = (option: any) => {
        const title: string = option.value ? option.value : option;
        if (variantColorsMap[title]) {
            return variantColorsMap[title];
        }
        return '#fff';
    }

    const renderOptions = React.useCallback((options: any[]) => {
        if (!Array.isArray(options)) {
            return null;
        }

        return options.filter((option: any) => {
            if (!option) return false;
            const value = option.value ? option.value : option;
            return !(/none/i.test(value) || /original/i.test(value));
        }).map((option: any, index: number) => (
            <View style={{flexDirection: 'row'}} key={'option_' + index}>
                <Text
                    style={[styles.orderItemOptionTitle, {color: getVariantColor(option)}]}>{getFullTitle(option)}</Text>
            </View>
        ));
    }, [styles.orderItemOptionTitle]);

    const renderComments = React.useCallback((comments: any[]) => {
        if (comments) {
            return comments.filter(comment => {
                return !(!comment || !comment.name);
            }).map((comment: any, index: number) => (
                <View style={{flexDirection: 'row'}} key={'option_' + index}>
                    <Text style={styles.orderItemOptionTitle}>
                        <Text style={{color: '#fff'}}>--</Text>
                        <Text>{comment.type + '-' + comment.name + (comment.name_cn ? '(' + comment.name_cn + ')' : '')}</Text>
                    </Text>
                </View>
            ))
        }
        return null;
    }, [styles.orderItemOptionTitle]);

    return (
        <View style={[styles.orderItem]}>
            <Text style={[
                styles.orderItemTitle,
                {
                    backgroundColor: item.product?.title_color ? item.product.title_color : colors.black,
                    color: item.product?.title_color ? colors.white : colors.safetyOrange,
                }
            ]}>
                <Text>{item.quantity}</Text>
                <Text style={{marginTop: 3}}>*</Text>
                <Text>{item.title + (item.name ? `(${item.name})` : '')}</Text>
                {
                    item.is_addon ? (
                        <Text>++</Text>
                    ) : null
                }
            </Text>
            {renderOptions(Object.values(item.variations))}
            {renderOptions(item.options)}
            {renderComments(item.comments)}
        </View>
    );
};

export default React.memo(Ordertem);
